export default {
  name: 'HotMap',
  props: {
    /* dataList: [{lng:"",lat:"",value:""}...] */
    dataList: { type: Array, default: () => [] },
  },
  created() {
    if (!this.$attrs.map) {
      throw new Error('map is required!');
    }
    this.map = this.$attrs.map;
    this.view = new mapvgl.View({ map: this.map });
    this.heatMapLayer = new mapvgl.HeatmapLayer({
      size: 20, // 单个点绘制大小
      max: 300, // 最大阈值
      min: 1, // 最小阈值
      height: 0, // 最大高度，默认为0
      unit: 'px', // 单位，m:米，px: 像素
      gradient: {
        // 对应比例渐变色
        0.25: 'rgba(0, 0, 255, 0.8)',
        0.55: 'rgba(0, 255, 0, 0.8)',
        0.85: 'rgba(255, 255, 0, 0.8)',
        1: 'rgba(255, 0, 0, 0.8)',
      },
    });

    this.$watch(
      () => this.dataList,
      function () {
        const data = this.dataList.map((item) => {
          return {
            properties: { count: item.value },
            geometry: { type: 'Point', coordinates: [item.lng, item.lat] },
          };
        });
        this.heatMapLayer.setData(data);
      },
      { immediate: true }
    );
  },
  unmounted() {
    this.heatMapLayer.clear();
    this.view.destroy();
  },
  methods: {
    show() {
      this.view.addLayer(this.heatMapLayer);
    },
    hide() {
      this.view.removeLayer(this.heatMapLayer);
    },
  },
  render() {
    return null;
  },
};
